@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">余额列表</li>
                            </ol>
                        </nav>
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="top-bar" style="padding: 20px 0; display: flex; flex-wrap: wrap; align-items: center;">
                                            <el-select clearable v-model="queryForm.balance_type" placeholder="请选择钱包类型" style="width: 100px; margin-right: 10px;">
                                                <el-option label="全部" value=""></el-option>
                                                <el-option label="乐游币" value="1"></el-option>
                                                <el-option label="红包币" value="5"></el-option>
                                                <el-option label="商城积分" value="2"></el-option>
                                                <el-option label="玩服积分" value="3"></el-option>
                                                <el-option label="新红包币" value="6"></el-option>
                                            </el-select>
                                            <el-select clearable v-model="queryForm.from_type" placeholder="请选择来源" style="width: 160px; margin-right: 10px;">
                                                <el-option label="全部" value=""></el-option>
                                                <el-option label="充值" value="1"></el-option>
                                                <el-option label="兑换" value="2"></el-option>
                                                <el-option label="兑换商品" value="3"></el-option>
                                                <el-option label="下级奖励" value="4"></el-option>
                                                <el-option label="实名认证" value="5"></el-option>
                                                <el-option label="手机号绑定" value="6"></el-option>
                                                <el-option label="下级手机号绑定" value="7"></el-option>
                                                <el-option label="下级实名认证" value="8"></el-option>
                                                <el-option label="管理员修改" value="9"></el-option>
                                                <el-option label="游戏活动赠送" value="10"></el-option>
                                                <el-option label="老兵活动" value="11"></el-option>
                                                <el-option label="5日签到" value="12"></el-option>
                                                <el-option label="新抽奖模式" value="13"></el-option>
                                            </el-select>
                                            <el-date-picker
                                                v-model="queryForm.start_time"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="请选择开始日期"
                                                style="margin-right: 10px;">
                                            </el-date-picker>
                                            <el-date-picker
                                                v-model="queryForm.end_time"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="请选择结束日期"
                                                style="margin-right: 10px;">
                                            </el-date-picker>
                                            <el-input v-model="queryForm.unionid" placeholder="请输入unionid" style="width: 220px; margin-right: 10px;"></el-input>

                                            <el-input v-model="queryForm.remark" placeholder="请输入关键字" style="width: 120px; margin-right: 10px;"></el-input>
                                            <el-input v-model="queryForm.game_account" placeholder="请输入游戏账号" style="width: 150px; margin-right: 10px;"></el-input>
                                            <el-tag style="margin-right: 10px;">变化值：@{{ changeTotal }}</el-tag>
                                            <el-button type="primary" @click="search">搜索</el-button>
                                        </div>


                                        <el-table
                                            :data="orderList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="unionid"
                                                label="unionid"
                                                width="250"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="account"
                                                label="账号"
                                                width="150"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop=""
                                                label="钱包类型"
                                                width="120"
                                            >
                                                <template slot-scope="scope">
                                                    <span v-if="scope.row.balance_type === 1">乐游币</span>
                                                    <span v-if="scope.row.balance_type === 2">商城积分</span>
                                                    <span v-if="scope.row.balance_type === 3">玩服积分</span>
                                                    <span v-if="scope.row.balance_type === 5">红包币</span>
                                                    <span v-if="scope.row.balance_type === 6">新红包币</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="来源"
                                                width="120"
                                            >
                                                <template slot-scope="scope">
                                                    <span v-if="scope.row.from_type === 1">充值</span>
                                                    <span v-if="scope.row.from_type === 2">兑换</span>
                                                    <span v-if="scope.row.from_type === 3">兑换商品</span>
                                                    <span v-if="scope.row.from_type === 4">下级奖励</span>
                                                    <span v-if="scope.row.from_type === 5">实名认证</span>
                                                    <span v-if="scope.row.from_type === 6">手机号绑定</span>
                                                    <span v-if="scope.row.from_type === 7">下级手机号绑定</span>
                                                    <span v-if="scope.row.from_type === 8">下级实名</span>
                                                    <span v-if="scope.row.from_type === 9">管理员修改</span>
                                                    <span v-if="scope.row.from_type === 10">活动赠送</span>
                                                    <span v-if="scope.row.from_type === 11">老兵活动</span>
                                                    <span v-if="scope.row.from_type === 12">5日签到活动</span>
                                                    <span v-if="scope.row.from_type === 13">新抽奖模式赠送</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="change"
                                                label="变化值"
                                                width="100"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="now"
                                                label="变化后值"
                                                width="100"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="remark"
                                                label="说明"
                                                min-width="200"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                min-width="100"
                                                prop="site_host"
                                                label="站点"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="create_time"
                                                width="140"
                                                label="时间"
                                            >
                                            </el-table-column>
                                        </el-table>

                                        <div id="pagination"></div>

                                    </div>

                                </div> <!-- .card-body -->
                            </div> <!-- .card -->
                        </div> <!-- .page-content -->
                    </div> <!-- .container-fluid -->
                </div> <!-- .content-container -->
            </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    queryForm: {
                        balance_type: '',
                        from_type: '',
                        unionid: '',
                        game_account: '',
                        page: 1,
                        remark: '',
                        start_time: '{{ date("Y-m-d") }}',
                        end_time: '{{ date("Y-m-d") }}',
                    },
                    orderList: [],
                    totalPage: 0,
                    curPage: 0,
                    changeTotal: 0,
                }
            },
            mounted() {
                this.queryForm.unionid = this.getUrlParam('union_id')
                this.getOrderList()
                this.getStatistic()
                layui.use(['laydate', 'form'], function () {
                    var laydate = layui.laydate
                    var form = layui.form
                    // 初始化日期选择器
                    laydate.render({
                        elem: '#start_time',
                        type: 'date',
                        format: 'yyyy-MM-dd',
                        value: vueApp.queryForm.start_time,
                        done: function (value, date, endDate) {
                            vueApp.queryForm.start_time = value
                        }
                    })
                    laydate.render({
                        elem: '#end_time',
                        type: 'date',
                        format: 'yyyy-MM-dd',
                        value: vueApp.queryForm.end_time,
                        done: function (value, date, endDate) {
                            vueApp.queryForm.end_time = value
                        }
                    })
                    form.render()
                })
            },
            methods: {
                getOrderList() {
                    this.queryForm.start_time = this.queryForm.start_time ? this.queryForm.start_time : ''
                    this.queryForm.end_time = this.queryForm.end_time ? this.queryForm.end_time : ''
                    adminApi_getBalanceLog(this.queryForm).then(res => {
                        this.orderList = res.data.data
                        this.totalPage = res.data.last_page
                        this.curPage = res.data.current_page
                        this.initPagination()
                    })
                },
                getStatistic() {
                    this.queryForm.start_time = this.queryForm.start_time ? this.queryForm.start_time : ''
                    this.queryForm.end_time = this.queryForm.end_time ? this.queryForm.end_time : ''
                    adminApi_getBalanceLogStatistic(this.queryForm).then(res => {
                        this.changeTotal = res.data.change
                    })
                },
                pageChange(p) {
                    this.queryForm.page = p
                    this.getOrderList()
                    this.getStatistic()
                },
                search() {
                    this.queryForm.page = 1
                    this.getOrderList()
                    this.getStatistic()
                },
                getUrlParam(name) {
                    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
                    let r = window.location.search.substr(1).match(reg)
                    if (r != null) return decodeURI(r[2])
                    return ''
                },
                initPagination() {
                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage
                        // 执行一个laypage实例
                        laypage.render({
                            elem: 'pagination',
                            count: vueApp.totalPage * 10, // 数据总数
                            curr: vueApp.curPage,
                            jump: function (obj, first) {
                                if (!first) {
                                    vueApp.pageChange(obj.curr)
                                }
                            }
                        })
                    })
                }
            },
        })
    </script>
    </body>

@endsection
